import { CloseOutlined, ControlOutlined } from "@ant-design/icons";
import { LightFilter, ProFormSelect } from "@ant-design/pro-components";
import { Tooltip, Button, theme, Drawer, Empty, Tabs, TabsProps, Select, Space, Flex } from "antd";
import React, { useState } from "react";
const { getDesignToken, useToken } = theme;
const globalToken = getDesignToken();
const TabPageHeader: React.FC<any> = ({ children }) => {
	return (
		<>
			<Flex vertical gap="small">
				<LightFilter>
					<ProFormSelect
						name="status"
						label="任务状态"
						valueEnum={{
							open: "未解决",
							closed: "已解决"
						}}
						placeholder="任务状态"
					/>
					<ProFormSelect
						name="type"
						label="任务类型"
						valueEnum={{
							open: "未解决",
							closed: "已解决"
						}}
						placeholder="任务类型"
					/>
				</LightFilter>

				{children}
			</Flex>
		</>
	);
};

const TaskDrawer: React.FC<any> = ({ title = "任务管理", mask = false, width = 600 }) => {
	const [open, setOpen] = useState<boolean>(false);
	const { token } = useToken();
	const onClose = () => {
		setOpen(false);
	};
	const onOpen = () => {
		setOpen(true);
	};
	const items: TabsProps["items"] = [
		{
			key: "1",
			label: "正在进行",
			children: (
				<TabPageHeader>
					<Empty />
				</TabPageHeader>
			)
		},
		{
			key: "2",
			label: "已完成",
			children: "Content of Tab Pane 2"
		}
	];

	return (
		<>
			<Tooltip placement="bottom" title={title}>
				<Button type="text" icon={<ControlOutlined style={{ fontSize: "16px" }} />} onClick={onOpen} />
			</Tooltip>
			<Drawer
				styles={{
					header: {
						borderBottom: "0"
					},
					body: {
						paddingTop: "0"
					}
				}}
				maskClosable={true}
				closeIcon={false}
				title={title}
				mask={mask}
				placement={"right"}
				extra={<Button icon={<CloseOutlined />} type="text" onClick={onClose} />}
				onClose={onClose}
				width={width}
				open={open}
			>
				<Tabs defaultActiveKey="1" tabBarStyle={{ margin: "0 1px 4px 1px" }} items={items} />
			</Drawer>
		</>
	);
};
export default TaskDrawer;
